<template>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
// startTime = +new Date();
// min: startTime,
// return Math.max(0, val - startTime) + ' ms';

import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let date_timestr = +new Date();  //任务开始的最小值我这里就用的目前时间
    date_timestr = +new Date('2022/10/19');
    let opacity_Data = [            //隐藏部分的；开始时间的 (几天几小时)
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 4,
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 10,
    ]
    let high_Data = [               //高亮部分的；结束时间的
        1000 * 60 * 60 * 24 * 5,
        1000 * 60 * 60 * 24 * 10,
        1000 * 60 * 60 * 24 * 100,
        1000 * 60 * 60 * 24 * 50,
    ]

    let opacity_Data2 = [
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 4,
        1000 * 60 * 60 * 24 * 2,
        1000 * 60 * 60 * 24 * 10,
    ]
    let high_Data2 = [
        { value: 1000 * 60 * 60 * 24 * 10, name: '状态1', itemStyle: { color: 'red' } },
        { value: 1000 * 60 * 60 * 24 * 7, name: '状态2', itemStyle: { color: 'gold' } },
        { value: 1000 * 60 * 60 * 24 * 10, name: '状态3', itemStyle: { color: 'green' } },
        { value: 1000 * 60 * 60 * 24 * 55, name: '状态4', itemStyle: { color: 'yellow' } },
    ]
    const formatterTime = (d) => {
        let d_ = new Date(d);
        return `${d_.getFullYear()}/${d_.getMonth() + 1}/${d_.getDate()} ${d_.getHours()}:${d_.getMinutes()}:${d_.getSeconds()}`
    }
    let option = {
        backgroundColor: "#fff",
        grid: {
            containLabel: true,
            right: '10%',
            left: '5%',
            bottom: '6%',
            top: '10%',
        },
        legend: [
            {
                top: "5%",
                data: ['计划时间', '实际时间', '状态1', '状态2', '状态3', '状态4'],
                // selectedMode: false,        //这里禁止点击；需要的自己写事件使用filter动态setOption
                textStyle: {
                    fontSize: 12,
                    fontWeight: 600
                }
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // Use axis to trigger tooltip
                type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            },
            formatter: function (ToolFormatterParam) {
                let labels = `<div>
                <b>${ToolFormatterParam[0].name}</b>
            </div>`;
                ToolFormatterParam.map((item) => {
                    let isSeriesNameZero = item.seriesName.includes('0');
                    if (!isSeriesNameZero) {
                        let startTime = ToolFormatterParam.filter((item2) => {
                            if (item2.seriesName.includes((item.seriesName + '0'))) {
                                return item2
                            }
                        })[0].value + date_timestr;
                        let endTime = null;
                        endTime = date_timestr + item.value;
                        let label_item = `<div>${item.seriesName}：${formatterTime(startTime)} 至 ${formatterTime(endTime)}</div>`
                        labels += label_item
                    }
                })
                return labels;
            }
        },
        xAxis: {
            type: 'value',
            minInterval: 1000 * 60 * 60 * 24,       //最小轴线分割 一天的的值 如果是小时自行修改
            // 此处可
            // 最大的用于限制x多刻度线的一刻度值 这里8天一刻度；其它的都可以多了如果要细致到小时等等自行修改
            // 如果数据是天的且想要精确到一天甚至更小推荐添加滚动条
            maxInterval: 1000 * 60 * 60 * 24 * 8,   //最大轴线分割 一天的的值 如果是小时自行修改
            axisLabel: {
                fontSize: 12,
                fontWeight: 600,
                color: '#888',
                formatter: function (val, index) {
                    let date_ = new Date(val + date_timestr);
                    let label_ = `${date_.getFullYear()}/${date_.getMonth() + 1}/${date_.getDate()}`;
                    return label_;
                },
                // maxInterval 的设置刻度较多旋转显示
                rotate: 20
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#eee',
                },
            },
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            inverse: true,
            data: ['收购痛讯', '亿个小目标', '下一个小目标', '周游世界'],
            axisLabel: {
                color: '#333',
                fontSize: 12,
                fontWeight: 600
            },
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        // k = 0,1 隐藏的；k=1，2高亮的
        color: [
            '#fff',
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: '#4297FE', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#007BFF', // 0% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
            '#fff',
            {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                    {
                        offset: 0,
                        color: '#5198FF', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#8BF8FE', // 0% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            },
            'red',
            'gold',
            'green',
            'yellow'
        ],
        series: [
            {
                //开始空白（隐藏部分需要在后面加0）tooltip formatter内有判断需要修改注意
                name: '计划时间0',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },
                itemStyle: {
                    opacity: 0,
                },

                barWidth: 24,
                barGap: '10%',
                data: opacity_Data
            },
            {
                name: '计划时间',
                type: 'bar',
                stack: 'total',
                label: {
                    show: false
                },

                barWidth: 24,
                barGap: '10%',
                itemStyle: {
                    borderRadius: [6, 20, 20, 6]
                },
                data: high_Data
            },


            {
                name: '实际时间0',
                type: 'bar',
                stack: 'total2',
                label: {
                    show: false,
                },
                itemStyle: {
                    opacity: 0
                },
                barWidth: 24,

                barGap: '10%',
                data: opacity_Data2
            },
            {
                name: '实际时间',
                type: 'bar',
                stack: 'total2',
                label: {
                    show: false
                },

                barWidth: 24,
                barGap: '10%',
                itemStyle: {
                    borderRadius: [6, 20, 20, 6]
                },
                id: 'sjsj',
                data: high_Data2
            },

            {
                name: '状态1',
                type: 'bar',
                data: [],
                stack: 'total2',
            },
            {
                name: '状态2',
                type: 'bar',
                data: [],
                stack: 'total2',
            },
            {
                name: '状态3',
                type: 'bar',
                data: [],
                stack: 'total2',
            },
            {
                name: '状态4',
                type: 'bar',
                data: [],
                stack: 'total2',
            }
        ],
    };

    myChart.on('legendselectchanged', function (lparam) {
        let selected = lparam.selected;
        let c = JSON.parse(JSON.stringify(high_Data2)).map((v) => {
            if (!selected[v.name]) {
                return {
                    ...v,
                    value: 0
                }
            } else {
                return v
            }
        })
        myChart.setOption({
            series: {
                id: 'sjsj',
                data: c
            }
        })
    })
    myChart.setOption(option);
}

onMounted(() => {
    initChart();
})
</script>

<style lang="less" scoped>
.chart {
    width: 50%;
    height: 500px;
    margin-top: 20px;
}
</style>